<!-- 商品 --><!-- 商品详细信息 -->
<template>
    <page-view flex flex-col>
        <header-menu></header-menu>
        <div class=" flex flex-col flex-1">
            <div class="mt-0 w-full h-[60px] bg-white border-t-[#f8f8f8] shadow-2xl">
                <div class="flex flex-row items-center justify-between base-width h-full ">
                    <div class="left flex flex-row items-center">
                        <p class=" text-[16px]">{{ goodsDetailData.goods_name }}</p>
                        <span class="text-[12px] text-gray-400 mx-[10px]">|</span>
                        <p class="text-[12px] text-gray-400">Redmi手机</p>
                    </div>
                    <p class="text-[14px]">用户评价</p>
                </div>
            </div>
            <div class="h-[765px] base-width mt-[18px] flex">
                <div class="w-[560px] h-[560px] ">
                    <goods-swiper :goods_photo="goodsDetailData.goods_photo"></goods-swiper>
                </div>
                <div class="ml-[2px] flex flex-1 flex-col">
                    <p class="m-[12px] text-[22px] ">{{ goodsDetailData.goods_name }}</p>
                    <p class=" text-[14px] text-[gray]"><span class=" text-[orangered]">{{ goodsDetailData.goods_brief_o
                    }}</span>
                        {{ goodsDetailData.goods_brief }} </p>
                    <div class=" m-[16px]">
                        <span class="text-[orangered]">{{ goodsDetailData.goods_price }}元起</span>
                        <span class="mx-[5px] text-[12px] line-through ">{{ goodsDetailData.goods_sale_price
                        }}元</span>
                    </div>
                    <div class=" h-[95px] w-full bg-[#f3f4f6]  flex items-center">
                        <div class="text-[14px] ml-[30px]">
                            {{ loginClientInfo ? loginClientInfo.custom_addr : "北京 北京市 海淀区 清河街道" }}
                            <span class=" ml-2 text-[orangered]">有现货</span>
                        </div>
                    </div>
                    <!-- 选择颜色和版本 -->
                    <div class="my-4 leading-[40px]" v-for="(item, index) in goodsDetailData.goods_desc" :key="index">
                        <p class="my-2">选择{{ index }}</p>
                        <div class="grid-list">
                            <div class="grid-item" :class="{ active: selectedTypeMap.get(index) === g_index }"
                                v-for="(g_item, g_index) in item" :key="g_item"
                                @click="selectedTypeMap.set(index, g_index)">
                                {{ g_item }}
                            </div>
                        </div>
                    </div>
                    <!-- 总计信息 -->
                    <div class=" h-[145px] w-full p-[32px] bg-[#f3f4f6] flex flex-col justify-between">
                        <div class=" flex justify-between">
                            <div>
                                <span>{{ selected_goods_desc }}</span>
                            </div>
                            <div>
                                <span class="text-[orangered]">{{ goodsDetailData.goods_sale_price }}元起</span>
                                <span class="mx-[5px] text-[12px] line-through "> {{ goodsDetailData.goods_price
                                }}元</span>
                            </div>
                        </div>
                        <div class=" text-[28px] text-[orangered]">
                            总计：{{ goodsDetailData.goods_sale_price }}元
                        </div>
                    </div>
                    <div class="mt-[16px] h-[50px] flex">
                        <button class="h-full cursor-pointer w-[260px] bg-[orangered] text-white text-[16px] flex justify-center
                             items-center" @click="submitAddToShopCar">
                            加入购物车
                        </button>
                        <div
                            class=" h-full ml-[20px] w-[120px] bg-[#d1d5db] text-[16px] flex justify-center items-center">
                            喜欢</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 价格说明 -->
        <div class="bg-gray-100 mt-5">
            <div class="base-width m-auto box-border py-4">
                <p class="text-[22px] text-gray-600">价格说明</p>
                <p class="price-item">
                    <span>划线价：</span>商品展示的划横线价格为参考价， 该价格可能是商品首次上市钅肖售价、品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（ 如厂商指导价、建议零售价等）
                    或该商品在小米商城曾经展
                    示过的诮售价； 由于地区、时间的差异性和市场行情的波动， 品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致， 该价格 <span>并非原价、仅供参考。</span>
                </p>
                <p class="price-item">
                    <span>未划线价：</span>指商品的实时诮售价格， 其不因表述的差异改变性质。但商品具体结算价格可能因该商品参与的满减、预售、限时优惠等单个或多个活动，
                    或者因使用优惠券、红包、米金等而发生变化，
                    <span> 请以订单结算页展示为准</span>
                </p>
                <p class="price-item">
                    <span>其它：</span>商品详情页（ 含主图） 以图片或文字形式标注的到手价、券后价、众筹价、尝鲜价等价格可能是商品在使用优惠券或参与特定优惠活动或在特定时间段等情形下，
                    由系统根据相应规则计算得出的预
                    估单品结算价格，<span>具体请以订单结算页面的标价、优惠条件或具体活动规则为准</span>
                </p>
            </div>
        </div>
        <footer-menu></footer-menu>
    </page-view>
</template>
<script setup>
import API from "../../utils/API";
import { useRoute, useRouter } from "vue-router";
import { computed, ref, inject } from "vue";
import { mainStore } from "../../store/index.js"

import { ElMessageBox } from "element-plus";
const loadingText = ref("正在加载中");
const route = useRoute();
const router = useRouter();
const goodsDetailData = ref({});
const selectedTypeMap = ref(new Map());
const findById = (id) => {
    API.goodsInfo.findById(id)
        .then(result => {
            console.log(result);
            result.goods_desc = JSON.parse(result.goods_desc);
            result.goods_photo = JSON.parse(result.goods_photo);
            goodsDetailData.value = result;
            selectedTypeMap.value = new Map();
            Object.keys(result.goods_desc).forEach(item => {
                selectedTypeMap.value.set(item, 0);
            })

        })
}
(() => {
    let id = route.params.id;
    if (id) {
        findById(id);
    }
})();

//登录者的信息
const loginClientInfo = ref(mainStore().loginClientInfo)
//渲染选以后的selectTypeMap的内容
const selected_goods_desc = computed(() => {
    if (goodsDetailData.value.goods_desc) {
        let arr = []
        let keys = Object.keys(goodsDetailData.value.goods_desc)
        keys.forEach(key => {
            let selectedIndex = selectedTypeMap.value.get(key);
            arr.push(goodsDetailData.value.goods_desc[key][selectedIndex]);
        })
        return arr.join(" ");
    }
    return "";
});

const isLoading = ref(false);
//点击以后加入购物车
const submitAddToShopCar = () => {
    if (loginClientInfo.value) {
        //说明用户已经登录了
        isLoading.value = true;
        loadingText.value = "正在提交到购物车"
        API.shopCarInfo.addToShopCar({ goods_id: goodsDetailData.value.id })
            .then(result => {
                router.push({ name: "addToShopCarResult", params: { id: goodsDetailData.value.id } })
            })
            .finally(() => {
                isLoading.value = false;
            })
    } else {
        ElMessageBox.alert("您还没有登录，请先登录", "提示", {
            type: "info",
            confirmButtonText: "去登录",
            cancelButtonText: "算了",
            showCancelButton: true,
        }).then(result => {
            router.push({
                name: 'login',
                query: {
                    redirectPath: route.fullPath
                }
            })
        }).catch(() => {
        });
    }
}
</script>
<style scoped lang="scss">
.grid-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;

    .grid-item {
        @apply border border-solid border-gray-200 text-[14px] text-gray-800 p-2 h-[50px] flex flex-row items-center justify-center cursor-pointer;

        &.active {
            color: orangered;
            border-color: orangered;
        }
    }
}

.price-item {
    @apply text-gray-400 text-[14px] my-6;
    line-height: 1.7;
    user-select: none;

    span {
        @apply text-gray-600 font-bold;
    }
}
</style>
   